<template>
	<view>
		<view class="fill_wp" v-if="step==1">
			<view class="wp">
				<view class="shu_title">
					<view class="span"></view>
					<text>基本信息（必填）</text>
				</view>
			</view>

			<view class="fill_con bg_bai">
				<view class="item">
					<view class="span">商户号<text>*</text></view>
					<!-- <input class="uni_input" type="text" :disabled="true" placeholder="请扫码" />
				<view class="sao">
					<image src="../../static/images/i4.png" mode="widthFix"></image>
					<text>扫码识别</text>
				</view> -->

					<input class="uni_input" v-model="merchantno" type="text" placeholder="请输入" />

				</view>
				<view class="item">
					<view class="span">姓名<text>*</text></view>
					<input class="uni_input" type="text" v-model="nickname" placeholder="请输入" />
				</view>
				<view class="item">
					<view class="span">手机号<text>*</text></view>
					<input class="uni_input" type="text" v-model="phone" placeholder="请输入" />
				</view>
				<view class="item">
					<view class="span">身份证号<text>*</text></view>
					<input class="uni_input" type="idcard" v-model="idcard" placeholder="请输入" />
				</view>
			</view>

			<view class="wp">
				<view class="shu_title">
					<view class="span"></view>
					<text>借记卡信息（选填）</text>
				</view>
			</view>

			<view class="fill_con bg_bai">
				<view class="item">
					<view class="span">开户行</view>
					<input class="uni_input" type="text" v-model="bankname" placeholder="请输入" />
				</view>
				<view class="item">
					<view class="span">银行卡账号</view>
					<input class="uni_input" type="text" v-model="cardno" placeholder="请输入" />
				</view>
				<view class="item">
					<view class="span">持卡人</view>
					<input class="uni_input" type="text" v-model="owner" placeholder="请输入" />
				</view>
			</view>

			<view class="wp">
				<view class="shu_title ">
					<view class="span"></view>
					<text>设置用户名和密码（必填）</text>
				</view>
			</view>

			<view class="fill_con bg_bai">
				<view class="item">
					<view class="span">用户名<text>*</text></view>
					<input class="uni_input" type="text" :value="phone" placeholder="请输入" disabled />
				</view>
				<view class="item">
					<view class="span">设置密码<text>*</text></view>
					<input class="uni_input" v-model="password" type="text" placeholder="请输入" />
				</view>
				<view class="item">
					<view class="span">确认密码<text>*</text></view>
					<input class="uni_input" v-model="password_confirmation" type="text" placeholder="请输入" />
				</view>
			</view>
			<view class="h"></view>
			<view class="food_btn">
				<view class="food_btn_con">
					<text class="btn btn_two" @click="Next()">下一步</text>
				</view>
			</view>
		</view>

		<view class="wp" v-if="step==2">
			<view class="shu_title">
				<view class="span"></view>
				<text>选择预定金额</text>
			</view>
			<view class="money_list">
				<view class="item">
					<view class="con" :class="chose_fee==2000&&pay_fee==''?'on':''" @click="ChangeFee(2000)">2000
						<text>元</text>
					</view>
				</view>
				<view class="item">
					<view class="con" :class="chose_fee==10000&&pay_fee==''?'on':''" @click="ChangeFee(10000)">10000
						<text>元</text>
					</view>
				</view>
			</view>
			<view class="chose_moeny">
				<!-- <picker @change="bindPickerChange" :value="index" :range="array">
					<view class="mass">{{index==-1?'选择自定义金额':array[index]}}</view>
	
				</picker> -->
				<input type="number" @input="PayFee" v-model="pay_fee" placeholder="请输入自定义金额" />
				<text class="dw">万元</text>
			</view>

			<view class="info">
				<view class="shu_title">
					<view class="span"></view>
					<text>详细信息</text>
				</view>
				<view class="h"></view>
				<view class="info_con">
					<view class="top">
						<view class="li">
							<view class="span">存入金额（元）</view>
							<view class="b">{{endfee}}</view>
						</view>
						<view class="li">
							<view class="span">年化收益率</view>
							<view class="b" v-if="endfee==2000">{{config.min_rate*100}}%</view>
							<view class="b" v-else>{{config.max_rate*100}}%</view>
						</view>
						<view class="li">
							<view class="span">预计收益（元）</view>
							<view class="b" v-if="endfee==2000">{{config.min_rate*endfee}}</view>
							<view class="b" v-else>{{config.max_rate*endfee}}</view>
						</view>
					</view>

					<view class="bottom">
						<view class="li">
							<view class="span">{{endfee}}</view>
							<view class="b">积分</view>
						</view>
						<view class="li">
							<view class="span">{{common.getNextDate(0)}}</view>
							<view class="b">生效日期</view>
						</view>
						<view class="li">
							<view class="span">{{common.getDateOneYearLessOneDay()}}</view>
							<view class="b">到期日期</view>
						</view>
					</view>
				</view>
			</view>

			<view class="pay_mode">
				<view class="shu_title">
					<view class="span"></view>
					<text>选择支付方式</text>
				</view>

				<view class="pay">
					<view class="w_change">
						<view class="apply_item chose_item" :class="pay_type=='wechat'?'on':''"
							@click="pay_type='wechat'">
							<view class="left">
								<image mode="widthFix" src="../../static/images/pay1.png"></image>
								<text class="span">微信支付</text>
							</view>
						</view>
						<view class="apply_item chose_item" :class="pay_type=='offline'?'on':''"
							@click="pay_type='offline'">
							<view class="left">
								<image mode="widthFix" src="../../static/images/pay3.png"></image>
								<text class="span">线下支付</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="web_food_btn">
				<view class="btn_text">
					<view class="p">应付：<text>{{endfee}}</text></view>
					<view class="span" @click="GoPay()">去付款</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				config: [],
				step: 1,
				name: '', //姓名
				merchantno: '', //商户号
				idcard: '', //身份证号
				phone: '', //手机号
				nickname: '', //用户名
				cardno: '',
				bankname: '',
				owner: '',
				password: '',
				password_confirmation: '',
				array: ['男', '女'],
				gender: -1,
				pay_fee: '', //输入的支付金额
				chose_fee: '2000', //输入的支付金额
				endfee: 2000, // 最终支付金额
				pay_type: 'wechat',
				byopenid: '',

				// 13578965412
			}
		},
		onLoad(e) {
			let that = this;
			if (e.shopno) {
				that.merchantno = e.shopno;
			}
			
			if (that.common.IsWechat()) {
				if (that.common.GetStorage('byopenid')) {
					that.byopenid = that.common.GetStorage('byopenid');
					that.GetConfig();
				} else {
					const code = that.getUrlKeyfunction('code');
					if (code) {
						that.GetOpenId(code);
					} else {
						var _url = window.location.href;
						window.location.href =
							'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx94b6f3a9e0b140cf&redirect_uri=' +
							encodeURIComponent(_url) +
							'&response_type=code&scope=snsapi_userinfo&agentid=9&state=BYLM#wechat_redirect';
					}
				}
			} else {
				that.GetConfig();
			}
		},
		methods: {
			GetOpenId: function(code) {
				let that = this;
				console.log(code);
				that.common.http('POST', 'login/' + code, '', function(res) {
					console.log(res.data)
					if (res.data.token) {
						uni.setStorage({
							key: 'byopenid',
							data: res.data.user.openid,
							success: function() {
								console.log('success');
							}
						});
						that.byopenid = res.data.user.openid;
					} else {
						uni.setStorage({
							key: 'byopenid',
							data: res.data.openid,
							success: function() {
								console.log('success');
							}
						});
						that.byopenid = res.data.openid;
					}
					that.GetConfig();
				});
			},

			getUrlKeyfunction: function(name) {
				return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location
					.href) || [, ""])[1].replace(/\+/g, '%20')) || null
			},



			GetConfig: function() {
				let that = this;
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				that.common.http('GET', 'config', '', function(res) {
					uni.hideLoading();
					that.config = res.data;
				});
			},

			// 去付款
			GoPay: function() {
				let that = this;				
				if(that.endfee<1){
					uni.showToast({
						icon: 'none',
						title: '金额不能小于1万',
						duration: 2000
					});
					return false;
				}
				if(that.endfee>10000&&(that.endfee/10000).toString().indexOf('.')>-1){
					uni.showToast({
						icon: 'none',
						title: '金额不能为小数',
						duration: 2000
					});
					return false;
				}
				
				var _data = {
					password: that.password,
					password_confirmation: that.password_confirmation,
					nickname: that.nickname,
					phone: that.phone,
					idcard: that.idcard,
					merchantno: that.merchantno,
					pay_fee: that.endfee,
					pay_type: that.pay_type,
					openid: that.byopenid,
				};
				if (that.cardno) {
					that.cardno = that.cardno
				}
				if (that.owner) {
					that.owner = that.owner
				}
				if (that.bankname) {
					that.bankname = that.bankname
				}
				uni.showLoading({
					title: '数据提交中...',
					mask: true
				});
				that.common.http('POST', 'register', _data, function(res) {
					uni.hideLoading();
					console.log(res);

					if (res.data.result) {
						that.WeiXinPay(res.data.result)
					} else {
						if (res.code) {
							if (res.code == 200) {
								uni.showToast({
									icon: 'none',
									title: '存入成功，请登录后查看',
									duration: 2000
								});
								setTimeout(function() {
									uni.reLaunch({
										url: '/pages/login/login',
									})
								}, 1500);
							}
						} else {
							if (res.merchantno) {
								uni.showToast({
									icon: 'none',
									title: res.merchantno[0],
									duration: 2000
								});
								that.merchantno = '';
							} else if (res.cardno) {
								uni.showToast({
									icon: 'none',
									title: res.cardno[0],
									duration: 2000
								});
								that.cardno = '';
							} else if (res.owner) {
								uni.showToast({
									icon: 'none',
									title: res.owner[0],
									duration: 2000
								});
								that.owner = '';
							} else if (res.phone) {
								uni.showToast({
									icon: 'none',
									title: res.phone[0],
									duration: 2000
								});
								that.phone = '';
							}
							that.step = 1;
						}
					}
				});
			},

			//微信支付
			WeiXinPay: function(item) {
				WeixinJSBridge.invoke(
					'getBrandWCPayRequest', {
						"appId": item.appId,
						"timeStamp": item.timeStamp, //时间戳，自1970年以来的秒数     
						"nonceStr": item.nonceStr, //随机串     
						"package": item.package,
						"signType": "MD5",  
						"paySign": item.paySign //微信签名 
					},
					function(res) {
						if (res.err_msg == "get_brand_wcpay_request:ok") {
							uni.showToast({
								icon: 'none',
								title: '支付成功，请登录后查看',
								duration: 2000
							});
							setTimeout(function() {
								uni.reLaunch({
									url: '/pages/login/login',
								})
							}, 1500);
						} else {
							uni.showToast({
								icon: 'none',
								title: '注册成功!',
								duration: 2000
							});
							setTimeout(function() {
								uni.reLaunch({
									url: '/pages/login/login',
								})
							}, 1500);
						}
					});
			},


			ChangeFee(num) {
				let that = this;
				that.chose_fee = num;
				that.endfee = num;
				that.pay_fee = '';
			},
			PayFee: function() {
				let that = this;
				if (that.pay_fee == '') {
					that.endfee = that.chose_fee;
				} else {
					that.endfee = that.pay_fee * 10000;
				}
			},

			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.detail.value)
				this.gender = e.detail.value
			},
			Next: function() {
				let that = this;


				if (that.merchantno == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入商户号',
						duration: 2000
					});
				} else if (that.nickname == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入姓名',
						duration: 2000
					});
				} else if (that.phone == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号',
						duration: 2000
					});
				} else if (that.idcard == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入身份证号',
						duration: 2000
					});
				} else if (that.idcard.length != 18) {
					uni.showToast({
						icon: 'none',
						title: '请输入正确的身份证号',
						duration: 2000
					});
				} else if (that.idcard == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入身份证号',
						duration: 2000
					});
				} else if ((that.bankname != '' && (that.cardno == '' || that.owner == '')) ||
					(that.cardno != '' && (that.bankname == '' || that.owner == '')) ||
					(that.owner != '' && (that.bankname == '' || that.cardno == ''))) {
					uni.showToast({
						icon: 'none',
						title: '银行卡信息不能只填一个',
						duration: 2000
					});
				} else if (that.password == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入密码',
						duration: 2000
					});
				} else if (that.password_confirmation == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入确认密码',
						duration: 2000
					});
				} else if (that.password_confirmation !== that.password) {
					uni.showToast({
						icon: 'none',
						title: '两次密码不一致，请重新输入',
						duration: 2000
					});
					that.password_confirmation = '';
				} else {
					this.step = 2;
				}
			},
		}
	}
</script>

<style scoped>
	.mt30 {
		margin-top: 30rpx;
	}


	.info {
		margin-top: 30rpx;
	}

	.info_con {
		padding: 26rpx;
		background-color: #fff;
		border-radius: 8px;
	}

	.info .top {
		padding: 0 26rpx;
		height: 136rpx;
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: #f2f7ff;
		border-radius: 8px;
	}

	.info .top .span {
		font-size: 22rpx;
		color: #999;
	}

	.info .top .b {
		font-size: 38rpx;
		color: #333;
		margin-top: 12rpx;
		font-weight: bold;
	}


	.info .bottom {
		padding: 0 26rpx;
		text-align: center;
		display: flex;
		align-items: center;
		margin-top: 30rpx;
		justify-content: space-between;
	}

	.info .bottom .span {
		font-size: 28rpx;
		color: #333;
	}

	.info .bottom .b {
		font-size: 24rpx;
		color: #999;
		margin-top: 12rpx;
	}

	.chose_moeny {
		position: relative;
		margin-top: 20rpx;
		background-color: #fff;
		border-radius: 8px;
		padding: 20rpx;
		padding-right: 120rpx;
	}

	.chose_moeny .dw {
		position: absolute;
		right: 0rpx;
		font-size: 24rpx;
		color: #000;
		width: 102rpx;
		top: 50%;
		transform: translateY(-50%);
	}

	.chose_moeny picker {
		width: 100%;
		height: 64rpx;
		line-height: 62rpx;
		border: 1px solid #e9ebf0;
		border-radius: 8px;
		color: #333;
		padding: 0 20rpx;
		font-size: 24rpx;
		box-sizing: border-box;
	}


	.chose_moeny input {
		width: 100%;
		height: 64rpx;
		line-height: 62rpx;
		border: 1px solid #e9ebf0;
		border-radius: 8px;
		color: #333;
		padding: 0 20rpx;
		font-size: 24rpx;
		box-sizing: border-box;
	}

	.wp {
		padding-top: 30rpx;
	}

	.money_list {
		margin-left: -20rpx;
		overflow: hidden;
		margin-top: 30rpx;
	}

	.money_list .item {
		width: 50%;
		padding-left: 20rpx;
		float: left;
	}

	.money_list .item .con {
		background-color: #fff;
		border-radius: 8px;
		text-align: center;
		height: 100rpx;
		line-height: 96rpx;
		border: 1px solid #fff;
		font-size: 38rpx;
		color: #000;
	}

	.money_list .item .con.on {
		background-color: #ebf2ff;
		border: 1px solid #227fff;
	}

	.money_list .item .con text {
		font-size: 26rpx;
	}

	.pay_mode {
		margin-top: 30rpx;
	}

	.pay {
		margin-top: 30rpx;
	}

	.pay .w_change {
		background-color: #fff;
		padding: 10rpx 26rpx;
		border-radius: 8px;
	}

	.pay .w_change h3 {
		font-size: 32rpx;
		color: #000;
	}



	.w_change .apply_item {
		overflow: hidden;
		position: relative;
		height: 70rpx;
		margin: 20rpx 0;
	}

	.w_change .apply_item .left {
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
	}

	.w_change .apply_item image {
		width: 44rpx;
		vertical-align: middle;
		margin-right: 6px;
	}

	.w_change .apply_item .span {
		font-size: 11pt;
		color: #333;
		vertical-align: middle;
		margin-right: 6px;
	}


	.w_change .chose_item {
		background-image: url(@/static/images/my16.png);
		background-size: 18px;
		background-repeat: no-repeat;
		background-position: right center;
	}

	.w_change .chose_item.on {
		background-image: url('@/static/images/c_i11.png');
	}
</style>